@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html, body {
    @apply h-full;
  }

  #app {
    @apply h-full flex flex-col;
  }
}

@layer components {
  .btn {
    @apply px-4 py-2 rounded-md transition-colors font-medium;
  }

  .btn-primary {
    @apply bg-primary text-white hover:bg-blue-400;
  }

  .form-input {
    @apply w-full p-3 rounded-md border border-gray-300 focus:border-primary focus:ring focus:ring-primary/20 transition outline-none;
  }

  .text-link {
    @apply text-primary hover:text-blue-400 transition-colors;
  }

  .message-bubble {
    @apply max-w-[75%] p-3 rounded-lg break-words;
  }

  .message-sent {
    @apply message-bubble bg-primary text-white ml-auto shadow-md;
    background-color: #4A90E2 !important; /* 更深的蓝色，提高可见性 */
    border-top-right-radius: 0;
    font-weight: 500;
  }

  .message-received {
    @apply message-bubble bg-gray-200 text-gray-800 mr-auto shadow-sm;
    border-top-left-radius: 0;
  }
}